<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="30%"
    class="common-confirm-dialog"
    @close="close"
  >
    <p style="margin: 15px 10px">{{ this.content }}</p>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button size="small" @click="cancel">{{ cancelText }}</el-button>
        <el-button
          size="small"
          v-if="onConfirm && type == 'primary'"
          :loading="loading"
          :type="type"
          @click="confirm"
          >{{ btnSureTitle }}</el-button
        >
        <el-button
          size="small"
          v-if="onConfirm && type == 'danger'"
          :type="type"
          @click="confirm"
          :loading="loading"
        >
          <svg-icon icon-class="trash" />
          {{ btnSureTitle }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'common-confirm',
  data() {
    return {
      title: 'Tip',
      content: '',
      dialogVisible: false,
      btnSureTitle: 'Ok',
      onConfirm: undefined,
      onCancel: undefined,
      type: 'primary',
      cancelText: ''
    }
  },
  props: {},
  methods: {
    confirm() {
      if (this.onConfirm) {
        this.onConfirm(this, this.close)
      }
    },
    cancel() {
      if (this.onCancel) {
        this.onCancel()
        this.close()
      } else {
        this.close()
      }
    },
    showConfirmDialog(title, content, btnSureTitle, confirm, cancel) {
      this.title = title
      this.content = content
      this.btnSureTitle = btnSureTitle
      this.onConfirm = confirm
      this.onCancel = cancel
      this.dialogVisible = true
      this.type = 'primary'
    },
    showDeleteDialog(title, content, btnDeleteTitle, confirm, cancel) {
      this.title = title
      this.content = content
      this.btnSureTitle = btnDeleteTitle
      this.onConfirm = confirm
      this.onCancel = cancel
      this.dialogVisible = true
      this.type = 'danger'
    },
    close() {},
    handleClose(done) {
      done()
    }
  }
}
</script>
